<style scoped>
.wraper {
    padding: 0 20px;
}

.search {
    padding-bottom: 20px;
}

.search span {
    color: #68777c;
    font-weight: bold;
    padding-right: 18px;
}

.search button {
    background-color: #00a8f7;
    color: #fff;
    margin-left: 8px;
}

.top {
    margin-bottom: 20px;
    border-top: 1px dashed #cccccc;
}


.wraper .headline {
    position: relative;
    font-size: 12px;
    color: #303134;
    font-weight: bold;
    margin: 10px 0;
    line-height: 32px;
}

.wraper .add-agent {
    position: absolute;
    top: 0px;
    right: 30px;
    background-color: #348bf2;
    color: #fff;
}

.iconfont {
    font-size: 14px;
}

.red-font {
    color: #ff1f1f;
}




.fixed-bottom{
    padding-left: 20px;
    padding-right: 20px;
    height: 80px;
    line-height: normal !important;
    position: fixed;
    left: 210px;
    right: 0;
    bottom: 0;
    z-index: 999;
    text-align: center;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
}
.sidehide{
    left: 75px;
}


/* 表格样式 start*/

.pro-card {
    margin-bottom: 10px;
}

.pro-card-head {
    background-color: #e6e7eb;
    line-height: 38px;
    border: 1px solid #ddd;
}

.pro-card-title {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    padding-left: 20px;
}

.pro-card-headr {
    padding-right: 10px;
    text-align: right;
}

.pro-card-content {
    clear: both;
}

.pro-paramname {
    text-align: center;
    background-color: #e6e7eb;
    font-size: 14px;
    color: #333;
    border-right: 1px solid #ddd;
}

.pro-paramvalue {
    padding-left: 10px;
    border-right: 1px solid #ddd;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

.pro-card-contentrow {
    line-height: 40px;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}






/* 表格样式  end */


/* 分页 start */

.page {
    margin:  0;
}

.ivu-page {
    padding-bottom: 150px;
}







/* 分页 end */
</style>
<style>
.a-link{
    color: #4074e1;
    text-decoration: underline;
    cursor: pointer;
}
.ivu-table-row-highlight .a-link{
    color:#fff;
}
</style>



<template>
    <div class="policy-manage">
        <product-title></product-title>
        <div class="wraper">        
            <div class="pro-con-f common-box-body">
                <Row>
                    <h3 class="search-h3 huang" >
                        快速搜索
                    </h3>
                        <Form  :model="searchForm" class="search-form">
                            <Col :xs="24" :sm="24" :md="12" :lg="6">
                                <Form-item label="公司类型">
                                    <Select v-model="searchForm.type" transfer placeholder="请输入类型">
                                        <Option  value="0">全部</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="10">
                                <FormItem  label="选择公司">
                                    <Select v-model="searchForm.cid" label-in-value :label="cname" @on-change="comchange($event)" filterable remote  :remote-method="remoteCom" :loading="proloading"  placeholder="选择保险公司" :transfer=true>  
                                            <Option v-for="(option, index) in comoptions" :value="option.value" :key="index">{{option.label}}</Option>                               
                                        </Select>
                                </FormItem>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="6">
                                <Form-item label="投保时间">
                                    <DatePicker type="date" transfer placeholder="请选择" v-model="searchForm.insure_datetime" @on-change="datachange($event,searchForm,insure_date)"></DatePicker>
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="6">
                                <Form-item label="投保人">
                                    <Input size="large" type="text"  v-model="searchForm.appName" placeholder="投保人" />
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="5">
                                <Form-item label="选择机构">
                                    <Select ref="orgselect" label-in-value :label="oname" filterable remote @on-change="orgchange($event)" :remote-method="oidremote" :loading="remoteloading" placeholder="请输入分支机构" v-model="searchForm.yun_org_mid" :transfer=true>
                                        <Option v-for="item in orglist" :value="item.value" :key="item.value">{{item.label}}</Option>                                                                                                                                       
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="5">
                                <Form-item label="业务员">
                                    <Select v-model="searchForm.agent_name" label-in-value :label="aname" @on-change="agentchange($event)" transfer  filterable remote  :remote-method="remoteemployee" :loading="proloading"  placeholder="选择业务员">  
                                        <Option v-for="(option, index) in employeelist" :value="option.label" :key="index">{{option.label}}</Option>                               
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="12" :md="12" :lg="6">
                                <Form-item label="保单状态">
                                    <Select v-model="searchForm.status" transfer placeholder="请选择保单状态">
                                        <Option  value="0">全部</Option>
                                        <Option  value="1">预收件</Option>
                                        <Option  value="5">失效件</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col :xs="24" :sm="24" :md="24" :lg="2" >
                                <Form-item  style="padding-right:0px;">
                                    <Button size="large"  class="fr" type="info" icon="ios-search" @click="search">搜索</Button>
                                </Form-item>
                            </Col>
                            <div class="clear"></div>
                        </Form>
                        <Col span="24" class="table-action" >
                            <Button type="success" size="large" class="fr" icon="plus"  @click="createPloicy">新增</Button>
                            <!-- <div style="border-right: 1px solid #EDF2F6;padding-right: 15px;margin-right: 15px;" class="fr">
                                <span class="clear"></span>
                                <Button type="primary" size="large" class="fr" icon="icon iconfont icon-riqi"  @click="headSet">表头设置</Button>
                            </div> -->
                        </Col>
                </Row>
            </div>
            <div class="detail">
                <div class="clearfix">
                    <div class="table-theme highlight_table">
                        <Table :loading="tableloading" ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large" stripe highlight-row border :columns="columns1" :data="policylist" class=""></Table>
                    </div>                        
                </div>
            </div>
        </div>
        <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
            <Row class="pro-pagesize">
                <Col :md="24" :lg="16">
                    <Button type="error" :disabled="tableaction" @click="policyDel" size="large" class="fl mr10 ">删除</Button>
                    <Button type="primary" :disabled="tableaction" @click="policyEdit" size="large" class="fl mr10">编辑</Button>
                    <Button type="success" :disabled="tableaction" @click="policyUnderwriteBtn" size="large" class="fl mr10">承保</Button>
                </Col>
                <Col :md="24" :lg="8" class="tRight">
                    <Page ref="pages" :current="currentpage" :total="listTotal" show-total show-sizer :page-size="pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                </Col>
            </Row>
        </div>
        <Modal v-model="underwriteModal" :mask-closable='closeable' width="600" title="承保时间" @on-ok="reInsure" :loading="loading">
            <Row class="common-box-body">
                <Col span="18" offset="3">                
                    <Form :model="underwrite"  :rules="ruleValidate">  
                        <FormItem label="承保单号" prop="policy_num">
                            <Input v-model="underwrite.policy_num" placeholder="请输入承保单号"></Input>
                        </FormItem>                                     
                        <Form-item label="承保时间" prop="underwrite_datetime">
                            <DatePicker type="date" v-model="underwrite.underwrite_datetime" @on-change="datachange($event,underwrite,'underwrite_date')"  placeholder="选择承保时间"></DatePicker>
                        </Form-item>
                    </Form>
                </Col>
            </Row>
        </Modal>
    </div>
</template>

<script>
import productTitle from '../../components/productTitle'
import { parteGetByName } from '../../api/parter'
import { getByName } from '../../api/employee'
import { getListByName } from '../../api/yun_org' 
import { getListInsure , policyUnderwrite , delPolicy } from '../../api/policy'
import { formatTime } from '../../libs/time'
import debounce  from 'lodash.debounce'
export default {
    data() {
        return {
            closeable: false,
            loading: true,
            page: 1,
            pagesize: 10,
            listTotal:0,
            searchForm: {
                p: 1,
                pagesize: 10,
                cid: '',
                oid: '',
                status: '',
                insure_date: '',
                insure_datetime: '',
                appName: '',
            },
            orglist:[],
            remoteloading:false,
            cname:'',
            oname:'',
            aname:'',
            proloading:false,
            comoptions:[],
            employeelist:[],
            tableloading:true,
            tableaction:true,  
            current:0,
            currentpage:1,
            underwriteModal:false,
            underwrite:{
                policy_num:'',
                underwrite_datetime:'',
                underwrite_date:'',
                policy_id:''
            },
            currentRow:{},
            columns1:[
                {
                    title: '公司名称',
                    key: 'cname',
                    align: 'center',
                },
                {
                    title: '保单号',
                    key: 'insure_num',
                    align:'center',
                    render:(h,params)=>{
                        return h('div',{
                            attrs:{
                                class:"a-link"
                            },
                            // on: {
                            //     click: () => {
                            //         this.toDetail(params.row.policy_id);
                            //     }
                            // }
                        },params.row.insure_num)
                    }
                },
                {
                    title: '投保人',
                    key: 'appName',
                    align:'center'
                },
                {
                    title: '保障计划',
                    key: 'name',
                    align:'center'
                },
                {
                    title: '规模保费',
                    key: 'premium',
                    align:'center'
                },
                {
                    title: '业务员',
                    key: 'agent_name',
                    align:'center'
                },
                {
                    title: '保单状态',
                    key: 'status',
                    align:'center',
                    render:(h,params)=>{
                        switch (params.row.status)
                        {
                            case 1:
                                return "预收件"
                                break;
                            case 5:
                                return "失效件"
                                break;
                            default:
                                return "预收件"
                        }
                    }
                },
            ],
            policylist:[

            ],
            ruleValidate: {                
                underwrite_datetime: [
                    { required: true, type: 'date', message: '请选择承保时间', trigger: 'change' }
                ],              
            },        
        }
    },
    components: {
        productTitle
    },
    computed: {
        slidetoggle(){
            return this.$store.state.sildeshow
        },
    },
    mounted () {
        this.getList();
    },
    methods: {
        toDetail(id){           
            this.$router.push({ name: 'insure_policy_detail' ,params:{id:id}});
        },
        toUpdate(id){
            this.$router.push({ name: 'insure_policy_update' ,params:{id:id}});            
        },
        //编辑保单
        policyEdit(){
            console.log(this.currentRow.policy_id)
            this.toUpdate(this.currentRow.policy_id)
        },
        //机构改变
        orgchange(value){
            console.log(this.$refs)
            console.log(value)
            this.oname = value.label
        },
        oidremote(query){
            if (query !== '') {
                if(query == this.oname){
                    this.searchForm.yun_org_mid = ''
                    return
                }
                this.remoteloading = true;
                this.remoteorg(query)               
            } else {
                this.orglist = [];
            }
        },
        remoteorg:debounce(function (query) { 
            
            new Promise((resolve, reject) => {
            let _params = {
                name:query
            }
            getListByName(_params).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                        // this.emplist = response.data.data 
                        this.remoteloading = false;                      
                        const list = response.data.data.map(item => {
                        return {
                                value: item.id,
                                label: item.shortn
                            };
                        });
                        this.orglist = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },300),
        //搜索保险公司change事件
        comchange(value){
            this.cname = value.label
        },
        remoteCom(query){
            if (query !== '') {
                if(query == this.cname){
                    this.searchForm.cid = ''
                    return
                }
                this.proloading = true;
                this.remotecom(query)               
            } else {
                this.comoptions = [];
            }
        },
        remotecom:debounce(function (query) {             
            new Promise((resolve, reject) => {
            let _params = {
                name:query
            }
            parteGetByName(_params).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                        // this.emplist = response.data.data 
                        this.proloading = false;                      
                        const list = response.data.data.map(item => {
                        return {
                                value: item.cid,
                                label: item.name
                            };
                        });
                        this.comoptions = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },300),
        //远程请求业务员
        agentchange(value){
            this.aname = value.label
        },
        remoteemployee(query){
            if (query !== '') {
                if(query == this.aname){
                    this.searchForm.agent_name = ''
                    return
                }
                this.proloading = true;
                this.remoteagent(query)               
            } else {
                this.employeelist = [];
            }
        },
        remoteagent:debounce(function (query) {             
            new Promise((resolve, reject) => {
            let _params = {
                name:query
            }
            getByName(_params).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                        // this.emplist = response.data.data 
                        this.proloading = false;                      
                        const list = response.data.data.map(item => {
                        return {
                                value: item.id,
                                label: item.name
                            };
                        });
                        this.employeelist = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },300),
        //删除保单
        policyDel(){

        },        
        //设置承保时间
        policyUnderwriteBtn(){
            this.underwriteModal = !this.underwriteModal;
        },
        //时间转换
        datachange(date,obj,param){
            obj[param] = date
        },
        headSet(){

        },
        tableCurrentChange(currentRow,oldCurrentRow){
            console.log(currentRow)
            console.log(oldCurrentRow)
            this.tableaction = false;
            this.currentRow = currentRow
            console.log(this.currentRow)
        },
        pageChange(){

        },
        pageSizeChange(){

        },
        // 搜索
        search() {
            this.getList();
        },
        // 获取员工列表
        getList() {  
            this.tableloading = true  
            this.tableaction = true        
            new Promise((resolve, reject) => {
                getListInsure(this.searchForm).then(response => {
                    if (response.data.err == 0) {
                        this.policylist = response.data.data.list;
                        this.listTotal = response.data.data.total;
                        this.tableloading = false
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        // 页码改变
        pageChange(page) {
            this.page = page
            this.searchForm.page = page
            this.getList()
        },
        // 每页条数改变
        pageSizeChange(pagesize) {
            this.pagesize = pagesize
            this.searchForm.pagesize = pagesize
            this.getList();
        },
        del(param) {
            new Promise((resolve, reject) => {
                delPolicy(param).then(response => {
                    if (response.data.err == 0) {
                        this.getList();
                        this.$Message.success(response.data.info);  
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        //添加or编辑代理人，打开modal
        createPloicy() {
            this.$router.push({ name: 'insure_policy_create' });
        },
        // 删除时弹出对话框
        policyDel() {
            this.$Modal.confirm({
                title: '提示',
                content: '是否要删除该保单?',
                onOk: () => {
                    let _params = {
                        'policy_id': this.currentRow.policy_id
                    }
                    this.del(_params);
                },
            });
        },
        // 承保
        reInsure() {
            this.underwrite.policy_id = this.currentRow.policy_id
            new Promise((resolve, reject) => {
                policyUnderwrite(this.underwrite).then(response => {
                    if (response.data.err == 0) {
                        this.getList();
                        this.$Message.success(response.data.info);
                        this.underwriteModal = false;
                        this.loading = true;
                    } else {
                        this.$Message.error(response.data.info);
                        setTimeout(() => {
                            this.loading = false;
                            this.$nextTick(() => {
                                this.loading = true;
                            });
                        }, 2000);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        }
    }
}
</script>
